<template>
  <div class="topcontent">
    <b-navbar>
      <template #brand>
        <b-navbar-item tag="router-link" :to="{ path: '/' }">
          <img
            src="@/assets/logo.png"
            alt="Lightweight UI components for Vue.js based on Bulma"
            style="min-height: 60px; margin-left: 23px"
            class="animated Flippers infinite"
          >
        </b-navbar-item>
      </template>
      <template #start >
        <b-navbar-item href="#" style="margin-left: 65px">
          Home
        </b-navbar-item>
        <b-navbar-item href="#">
          Documentation
        </b-navbar-item>
        <b-navbar-dropdown label="Info">
          <b-navbar-item href="#">
            About
          </b-navbar-item>
          <b-navbar-item href="#">
            Contact
          </b-navbar-item>
        </b-navbar-dropdown>

        <div class="panel-block">
          <p class="control has-icons-left" style="margin-left: 70px; min-width: 490px">
            <input class="input" type="text" placeholder="Search">
            <span class="icon is-left">
              <i class="fas fa-search" aria-hidden="true"></i>
            </span>
          </p>
        </div>
      </template>

      <template #end>
        <b-navbar-item tag="div">
          <div class="buttons">
            <router-link to="login">
            <a class="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light">
              Log in
            </a>
            </router-link>
          </div>
        </b-navbar-item>
      </template>
    </b-navbar>
  </div>
</template>

<script>
export default {
  name: 'navigation'
}
</script>

<style scoped>
.topcontent{
  margin-right: 50px;
}
.animated{
  -webkit-animation-duration: 200s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.Flippers {
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.infinite {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
}
</style>
